<!--
 * @Author: your name
 * @Date: 2021-08-31 20:29:05
 * @LastEditTime: 2021-09-06 15:57:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \新建文件夹 (6)\broker\src\views\tuan\chuang.vue
-->
<template>
  <div class="tuan">
    <div class="q1">
      <p @click="kkk" class="ll">
        <van-icon name="arrow-left" />
      </p>
      <p>新建团购</p>
      <p></p>
    </div>
    <div class="main">
      <div class="normal">
        <van-uploader :after-read="upIMG" v-model="fileList" />添加封面图
      </div>
      <input class="kj" type="text" placeholder="请输入团购标题" v-model="forms.name" />
      <input class="kj" type="text" placeholder="请输入楼盘地址" v-model="forms.address" />
      <input class="kj" type="text" placeholder="请选择开始日期" v-model="forms.time" />
      <input class="kj" type="text" placeholder="请选择结束日期" v-model="forms.endTime" />
      <input type="text" placeholder="请输入团购介绍" class="ipt" v-model="forms.teamcontext" />
      <button @click="Add">创建团购</button>
    </div>
  </div>
</template>
<script>
import axios from "../../utils/axios";
export default {
  name: "Tuan",
  data() {
    return {
      fileList: [],
      forms: {
        img: null,
        name: "",
        address: "",
        time: "",
        endTime: "",
        teamcontext: ""
      }
    };
  },
  created() {},
  methods: {
    upIMG(file) {
      console.log(file.file);
      this.forms.img = file.file;
      return;
    },
    
    Add() {
      let data = new FormData();
      data.append("file", this.forms.img);
      data.append("title", this.forms.name);
      data.append("address", this.forms.address);
      data.append("time", this.forms.time);
      data.append("endTime", this.forms.endTime);
      data.append("teamcontext", this.forms.teamcontext);
      console.log(data);
      axios.post("/addGroup", data).then(res => {
        console.log(res);
      });

      this.$router.push("/tuan");
    },
    kkk() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.q1 {
  height: 50px;
  background-color: rgb(70, 142, 224);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 9999;
}
.kj {
  border: 1px solid black;
}
.tuan {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.head {
  width: 100%;
  height: 50px;
  background: #2e9bfc;
}
.head img {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  height: 50px;
  background: #2e9bfc;
  display: flex;
  justify-content: space-around;
  color: #fff;
  line-height: 50px;
}
.header img {
  width: 90px;
  height: 30px;
  padding: 10px 5px;
}
h4 {
  margin-left: 40px;
}
.main {
  width: 100%;
  height: 100%;
}
.normal {
  width: 96%;
  height: 231px;
  border: 2px solid #ccc;
  text-align: center;
  line-height: 231px;
  margin-left: 5px;
  margin-top: 5px;
}
input {
  width: 96%;
  height: 40px;
  margin-left: 5px;
  margin-top: 5px;
}
.ipt {
  height: 100px;
  border: 1px solid black;
}
button {
  width: 100%;
  height: 50px;
  background: #169bd5;
  color: #fff;
  border: none;
  margin-top: 35px;
}
.ll{
  margin-left: 10px;
}
</style>